<template>
  <van-cell-group v-for="item in lists" :key="item">
    <van-cell center :icon="item.img" :title="item.title" :value="item.value" :label="item.label" />
  </van-cell-group>
</template>

<script setup>
const lists = [
  {
    img: '/images/avatar1.jpg',
    title: 'YSL圣罗兰美妆官方旗舰店',
    value: '星期一',
    label: "您有一条店铺消息"
  },
  {
    img: '/images/avatar2.jpg',
    title: 'FORNINES',
    value: '星期二',
    label: "亲爱哒:"
  },
  {
    img: '/images/avatar3.png',
    title: '订阅号消息',
    value: '星期日',
    label: "YSL圣罗兰美妆官方旗舰店:【全新「黑管唇釉」一抹成膜打造冰透玻璃唇！】"
  },
  {
    img: '/images/avatar4.png', title: '消息号内容',
    value: '星期一',
    label: "YSL圣罗兰美妆官方旗舰店:YSL「黑管唇釉」全新升级,一抹成膜,轻松打造欲感玻璃唇妆效"
  }
]
</script>

<style lang="less" scoped>
:deep(.van-cell) {
  .van-cell left-icon {
    width: 40px;
    height: 40px;

    .van-icon image {
      width: 100%;
      height: 100%;
    }
  }

  .van-cell title {
    .van-cell label {
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
      width: 165px;
    }
  }
}
</style>